<template>
  <div class="header">
    <div class="header-fiexd" style="">
      <div class="header-top flex-between app-container" style="height: 78px;">
        <div class="header-logo flex-start" style="width: 220px;">
          <img :src="logo" style="width: 220px; margin-right: auto;">
        </div>
        <div slot="reference" class="header-search">
          <i class="el-icon-search"></i>
          <div aria-haspopup="listbox" role="combobox" aria-owns="el-autocomplete-8697" class="el-autocomplete">
            <el-input :placeholder="$t('HeaderSearch')" />
            <div role="region" class="el-autocomplete-suggestion el-popper search-popper" style="display: none;">
              <div class="el-scrollbar">
                <div class="el-autocomplete-suggestion__wrap el-scrollbar__wrap"
                     style="margin-bottom: -6px; margin-right: -6px;">
                  <ul class="el-scrollbar__view el-autocomplete-suggestion__list" role="listbox"
                      id="el-autocomplete-8697"></ul>
                </div>
                <div class="el-scrollbar__bar is-horizontal">
                  <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                </div>
                <div class="el-scrollbar__bar is-vertical">
                  <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" size="large">Search</el-button>
        </div>
        <div class="header-user">
          <div class="flex-start">
            <i class="el-icon-user"></i>
            <div class="no-login" v-if="!userInfo.token">
              <span class="text" @click="jumpToLogin">{{$t('HeaderLog')}}</span>
              <span>{{$t('HeaderOr')}}</span>
              <span class="text" @click="jumpToRegister">{{$t('HeaderReg')}}</span>
            </div>
            <div class="no-login" v-else>
              <span class="text user-name" @click="jumpToMine">{{ userInfo.username }}</span>
              <span>{{$t('HeaderOr')}}</span>
              <span class="text" @click="handleLogout">{{$t('HeaderLogout')}}</span>
            </div>
            <div style="margin-right: 20px;" @click="handleKf"><i class="el-icon-headset"></i></div>
            <div style="cursor: pointer;" @click="handleMessage"><i class="el-icon-chat-line-round" style="font-size: 22px;"></i></div>
            <div class="lang-content">
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="lang-select el-dropdown-selfdefine">
                  <img
                    :src="imgUrl"
                    alt="" style="width: 18px; border-radius: 50%;">
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="en">
                      <div class="lang-item" data-lang="en">
                        <img src="@/assets/images/language-en.png"
                            alt="en" style="width: 18px;">
                        <span>English</span>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="zh">
                      <div class="lang-item" data-lang="zh">
                        <img src="@/assets/images/language-zh.png"
                             alt="zh-CN" style="width: 18px;" >
                        <span>中文简体</span>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-nav">
      <ul style="display: flex;">
        <li :class="{'active': currentRouter === '/'}"
            @click="handleRouterClick('/')"
        >{{$t('HeaderItem1')}}</li>
        <li :class="{'active': currentRouter === '/category'}"
            @click="handleRouterClick('/category')"
        >{{$t('HeaderItem2')}}</li>
        <li :class="{'active': currentRouter === '/product'}"
            @click="handleRouterClick('/product')"
        >{{$t('HeaderItem3')}}</li>
        <li :class="{'active': currentRouter === '/discounts'}"
            @click="handleRouterClick('/discounts')"
        >{{$t('HeaderItem4')}}</li>
        <li :class="{'active': currentRouter === '/promote'}"
            @click="handleRouterClick('/promote')"
        >{{$t('HeaderItem5')}}</li>
        <li :class="{'active': currentRouter === '/credit'}"
            @click="handleRouterClick('/credit')"
        >{{$t('HeaderItem6')}}</li>
      </ul>
    </div><!---->
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import {ElDropdown, ElDropdownItem, ElNotification} from "element-plus";
import { logout } from '@/api/index.js'
const i18n = useI18n();
const router = useRouter()
const currentRouter = ref('')
currentRouter.value = router.currentRoute.value.path
const logo = ref('')
logo.value = localStorage.getItem('logo')
const userInfo = JSON.parse(sessionStorage.getItem('userInfo')) || {}
const handleRouterClick = (path) => {
  console.log(path)
  if(currentRouter.value !== path){
    router.push(path)
  }
}
const isOpening = ref(false)
const openLanguage = () => {
  isOpening.value = true
}
const chooseLanguage = (lang) => {
  i18n.locale.value = lang
  isOpening.value = false
}
const imgUrl = computed(() => {
  const lang = i18n.locale.value
  // 只能用相对路径，不能用@
  return new URL(`../../assets/images/language-${lang}.png`, import.meta.url).href
})
const jumpToLogin = () => {
  router.push('/login')
}
const jumpToRegister = () => {
  router.push('/register')
}
const jumpToMine = () => {
  router.push('/mine')
}
const handleLogout = () => {
  logout().then(res => {
    ElNotification({
      title: 'Success',
      message: '已退出登录',
      type: 'success',
    })
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('userInfo')
    router.push('/login')
  }).catch(err => {})
}
const handleKf = () => {
  window.open('https://t.me/TG_164D1', '_target')
}
const handleMessage = () => {
  window.open('https://ml.thsjbvh.site/chat/#/pc/yellow?token=6941e42991de4fb0b71d8bfa1cf2309b&partyid=&name=&lang=cn&selfimg=1&productId=', '_target')
}
const handleCommand = (command) => {
  i18n.locale.value = command
  localStorage.setItem('lang', command)
  isOpening.value = false
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 165px;
  padding-top: 22px
}

.header.no-gap {
  margin-bottom: 0
}

.header-fiexd {
  padding-top: 22px;
  position: fixed;
  top: 0;
  z-index: 999;
  padding-bottom: 22px;
  left: 0;
  width: 100%;
  height: auto!important;
  transition: padding .5s linear 0s;
  background: #fff
}

.header-logo img {
  //height: 78px;
  margin-right: 15px;
  padding: 4px 0;
  cursor: pointer
}

.header-logo h1 {
  color: var(--color-black);
  font-size: 26px;
  margin: 0
}

.header-search {
  min-width: 367px;
  position: relative
}

.header-search .el-autocomplete {
  width: 100%
}

.header-search .el-input__inner {
  height: 39px;
  width: 100%;
  padding-left: 44px;
  padding-right: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.header-search .el-icon-search {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 18px;
  color: var(--color-tips)
}

.header-search .el-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 63px;
  height: 32px;
  padding: 0;
  text-align: center
}

.header-user {
  color: var(--color-grey);
  min-width: 300px;
  display: flex;
  justify-content: flex-end
}

.header-user .el-icon-user {
  margin-right: 11px;
  font-size: 22px;
  color: var(--color-icon)
}

.header-user .el-icon-bell,.header-user .el-icon-download {
  font-size: 22px;
  color: var(--color-icon);
  margin-right: 10px;
  cursor: pointer
}

.header-user .el-icon-headset {
  font-size: 22px;
  color: var(--color-icon);
  cursor: pointer
}

.header-user .no-login {
  font-size: 12px;
  display: flex
}

.header-user .no-login .user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.header-user .no-login span:nth-of-type(2) {
  margin: 0 10px
}

.header-user .no-login span:nth-of-type(3) {
  margin: 0 26px 0 0
}

.header-user .login,.header-user .no-login span {
  cursor: pointer
}

.header-user .login span {
  margin-right: 26px
}

.header-user .el-badge {
  cursor: pointer
}

.header-nav {
  margin-top: 98px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 13px;
  background: #fff
}

.header-nav ul {
  list-style: none;
  padding: 0;
  color: var(--color-title);
  justify-content: space-between;
  margin: 0 auto;
  width: 860px;
  display: flex
}

.header-nav ul li {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer
}

.header-nav ul .active,.header-nav ul li:hover {
  color: var(--color-main)
}

.lang-item {
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.lang-item span {
  margin-left: 8px;
  white-space: nowrap;
}

.search-popper .el-autocomplete-suggestion__list li {
  padding: 0
}

.search-popper .el-autocomplete-suggestion__list li:hover {
  background-color: var(--color-white)!important
}

.search-popper .search-content {
  padding: 0 13px
}

.search-popper .search-content-item {
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  font-size: 12px;
  overflow-x: hidden;
  text-overflow: ellipsis
}

.search-popper .search-content-history {
  font-weight: 500;
  font-size: 12px;
  color: var(--color-title)
}

.search-popper .search-content-history-header {
  padding: 6px 0
}

.search-popper .search-content-history-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap
}

.search-popper .search-content-history-list>div {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

.search-popper .search-content-history-list .el-tag {
  min-width: 70px;
  max-width: 330px;
  height: 33px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-subtitle)!important;
  border-color: #f6f6f6!important;
  background: #f6f6f6!important;
  text-align: center;
  border-radius: 5px;
  margin-right: 14px;
  margin-bottom: 10px
}

.search-popper .search-content-history-list-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%
}

.search-popper .search-content-history-list-list>div {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

.search-popper .search-content-history-list-list .el-tag {
  height: 33px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-subtitle)!important;
  border-color: #f6f6f6!important;
  background: #f6f6f6!important;
  text-align: center;
  border-radius: 5px;
  margin-right: 14px;
  margin-bottom: 10px
}

.search-popper .search-content-history-list-list .empty {
  width: 100%;
  text-align: center;
  padding: 16px 0;
  color: var(--color-subtitle)
}

.search-popper .search-content-history h1 {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-black)
}

.search-popper .search-content-history .el-icon-delete {
  margin-right: 5px
}
:deep(.el-dropdown-menu){
    margin-top: 12px;
}
:deep(.el-dropdown-menu__item){
  list-style: none;
  line-height: 36px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: 0;
}
.lang-item{
  padding-right: 50px;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
  background-color: #fff;
  color: #333;
}

</style>